@borderColor: #eaeaea; // 边框颜色
@navFontColor: #999; // 文字颜色
@navBgColor: #000; // 背景
@aHoverColor: #fff; // 鼠标移入背景颜色
@aHoverFontColor: #ff1132; // 鼠标移入字体颜色
.nav {
	height: 30px;

	background: @navBgColor;
	border-bottom: 1px solid @borderColor;
	a {
		float: left;

		height: 30px;
		color: @navFontColor;
		&:hover {
			color: @aHoverColor;
		}
	}

	.nav-left {
		/*左侧导航*/
		line-height: 30px;
		.welcome {
			float: left;
		}
		.account a {
			float: left;

			margin-left: 30px;
		}
		a.phone {
			position: relative;
			&:hover .code {
				display: block;
			}
		}
		a.phone .code {
			/*我二维码*/
			display: none;
			position: absolute;
			z-index: 999;
			top: 40px;
			left: 0;

			margin-left: 50%;
			padding: 0 12px;
			border: 1px solid @borderColor;

			transform: translate(-50%);
			background: @aHoverColor;
			span {
				display: block;

				line-height: 18px;
				color: @navBgColor;
				font-size: 14px;
				text-align: center;
				background: @aHoverColor;
			}
			img {
				z-index: 999;
				width: 116px;
				height: 116px;
			}
		}
		.arrow {
			/*小箭头*/
			position: absolute;
			width: 10px;
			height: 10px;
			top: -6px;
			left: 0;
			right: 0;

			margin: auto;
			border-top: 1px solid @borderColor;
			border-left: 1px solid @borderColor;
			background-color: @aHoverColor;

			transform: rotate(45deg);
		}
	}

	.nav-right {
		/*右侧导航*/
		line-height: 30px;
		.group1,
		.group2 {
			float: right;
			a {
				margin-right: 20px;
			}
		}
		.group2 {
			ul li {
				position: relative;
				float: left;
				a {
					z-index: 99;

					margin: 0;
					padding: 0 12px;
					&:hover {
						background-color: @aHoverColor;
						color: @aHoverFontColor;
					}
					&:hover i {
						border-top-color: @aHoverFontColor;
						transform: rotate(180deg);
					}
					i {
						/*小箭头*/
						display: inline-block;
						position: relative;
						top: 2px;
						left: 1px;
						width: 0;
						height: 0;

						border: 4px solid @navFontColor;
						border-left-color: transparent;
						border-right-color: transparent;
						border-bottom-color: transparent;

						transform-origin: center 2px;
						transition: transform 0.2s ease-in;
					}
				}
				a.video:hover {
					color: @aHoverColor;
					background: @navBgColor;
				}
			}
			ul li:hover ul.dropdown {
				display: block;
			}
			ul.dropdown {
				display: none;
				position: absolute;
				z-index: 999;
				top: 30px;
				left: 0;

				margin-left: 50%;
				background: @aHoverColor;
				border: 1px solid @borderColor;

				transform: translate(-50%);
				li {
					a {
						min-width: 90px;
						text-align: center;
						&:hover {
							color: @aHoverFontColor;
							background: @aHoverColor;
						}
					}
				}
				.line {
					display: inline-block;
					position: relative;

					height: 1px;
					width: 100px;
					margin-right: 10px;
					margin-left: 10px;
					background: @borderColor;
				}
			}
		}
	}
}
